<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box__left">
        <div class="left__name">
          校园物联中心
        </div>

        <div class="left__log">
          <ArkIconFont cls="icon-jiaoyu" size="100"/>
        </div>

        <div class="left__text">
          <div>Copyright © 2021 - 2025</div>
          <div>上海电器科学研究所（集团）有限公司版权所有</div>
        </div>
      </div>

      <div class="login-box__right">
        <div class="right__title">登录</div>

        <el-form
          class="w-full"
          ref="loginForm"
          :model="loginForm"
          :rules="loginFormRules"
          label-width="60px"
          label-position="right"
          hide-required-asterisk
          @keyup.enter.native="submitLoginForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model.trim="loginForm.username" placeholder="用户名"/>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="loginForm.password" placeholder="密码" show-password/>
          </el-form-item>

          <el-form-item label="验证码" prop="code">
            <div class="right__captcha">
              <el-input v-model.trim="loginForm.code" placeholder="验证码"/>

              <el-image class="w-[130px] h-[32px] cursor-pointer" :src="captchaImg"/>
            </div>
          </el-form-item>
        </el-form>

        <el-button class="w-full" type="primary" @click="submitLoginForm" :loading="loginBtnLoading">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import captchaImg from './captcha.png';
import ArkIconFont from "@/components/ark-iconfont/ArkIconFont.vue";
import {log} from "@/logger/logger.ts";
import homeRoute from "@/router/home-route.js";
import ServiceApi from "@/api/service-api.js";

export default defineComponent({
  name: 'Login',
  components: {ArkIconFont},
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        code: '',
      },
      loginFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
          },
        ],
      },
      loginBtnLoading: false,
      captchaImg: captchaImg,
    };
  },
  created() {
    log.error("error", {}, [])
    log.info("info", {}, [])
    log.warn("warn", {}, [])
    log.debug("debug", {}, [])
  },
  methods: {
    submitLoginForm() {
      this.loginBtnLoading = true;

      ServiceApi.backEndGet({query_name: 'syx'}).then(res => {
        console.log(res)
        this.$router.push(homeRoute.home.path);
      }).finally(() => {
        this.loginBtnLoading = false;
      })
    },
  }
});
</script>

<style scoped lang="scss">
.login {
  background-image: url("./background.png");
  background-size: 100% 100%;

  @apply flex justify-center items-center;

  .login-box {
    @apply flex;

    .login-box__left {
      @apply py-6 px-8 bg-blue rounded-l-lg text-blue-100;
      @apply flex flex-col justify-center items-center;

      .left__name {
        @apply text-xl;
      }

      .left__log {
        @apply w-[100px] h-[100px] rounded-[50%];
        @apply flex-1 flex justify-center items-center;
      }

      .left__text {
        @apply text-1xs;
        @apply flex flex-col justify-center items-center gap-y-2;
      }
    }

    .login-box__right {
      @apply w-[370px] min-h-[377px] p-6 rounded-r-lg;
      @apply flex flex-col justify-center items-center;

      background: rgba(249, 249, 249, 0.94);
      backdropFilter: saturate(100%) blur(20px);
      boxShadow: 0 0.33 rgba(0, 0, 0, 0.3);

      .right__title {
        @apply pb-6 text-xl text-[#17233DFF];
      }

      .right__captcha {
        @apply flex justify-center items-center gap-x-2;
      }
    }
  }
}
</style>